<template>
  <div class="app-container">
    <div class="flex-between">
      <el-input
        v-model="search"
        class="search-main"
        placeholder="请输入药品名称或编号查询"
        prefix-icon="el-icon-search"
      />
    </div>
    <el-table
      :data="paymentList"
      style="width: 100%;margin-top:30px;"
    >
      <el-table-column
        align="center"
        label="id"
        width=""
      >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="药方id"
        width=""
      >
        <template slot-scope="scope">
          {{ scope.row. prescriptionId }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="会员"
        width=""
      >
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="管理员"
        width=""
      >
        <template slot-scope="scope">
          {{ scope.row.creatorName }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="金额"
        width=""
      >
        <template slot-scope="scope">
          {{ scope.row. returnAmount }}
        </template>
      </el-table-column>
      <el-table-column
        align="header-center"
        label="创建时间"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        align="header-center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope)"
          >查看详细</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope)"
          >修改</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope)"
          >删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-dialog
      :visible.sync="dialog"
      :title="'查看详情'"
    >
      <p> 医师姓名: {{ payment.creatorName }}</p>
      <p> 会员姓名: {{ payment.userName }}</p>
      <p> 药单金额: ￥{{ payment.returnAmount }}</p>
      <p> 药方id: {{ payment.prescriptionId }}</p>
      <p> 备注: {{ payment.remark }}</p>
      <el-table
        :data="payment.prescriptionMedicineDTOList"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          prop="number"
          label="购买数量"
          width="180"
        />
        <el-table-column
          prop="returnNumber"
          label="退款数量"
          width="180"
        />
        <el-table-column
          prop="returnMoney"
          label="退款金额"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogT"
      :title="'退款退货'"
    >
      <p> 退货操作姓名: {{ payment.creatorName }}</p>
      <p> 退货金额: ￥{{ payment.returnAmount }}</p>
      <el-table
        :data="payment.prescriptionMedicineDTOList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          label="数量"
          width="180"
        >
          <template slot-scope="scope"><el-input v-model="scope.row.number" type="number" /></template>
        </el-table-column>
        <el-table-column
          prop="sellingPrice"
          label="单价"
        />
      </el-table>
      <div style="text-align:right;">
        <el-button
          type="danger"
          @click="dialogT=false"
        >取消</el-button>
        <el-button
          type="primary"
          @click="HandleReturnGoods()"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      class="pagination"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { getPayment, getPaymentById, returnGoods } from '@/api/pay'
import { timestampToTime } from '@/utils/time'
import { typePrescriptionC } from '@/utils/role'
import { getPrescriptionInfoById } from '@/api/prescription'
import { getReturn, getReturnById, getMedicineReturnById } from '@/api/medicine'

export default {
  components: {
  },
  data() {
    return {
      payment: { adminInfoVO: '', prescriptionMedicineDTOList: [] },
      routes: [],
      dialog: false,
      dialogT: false,
      search: '',
      paymentList: [],
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      chuku: false,
      activeName: 'first',
      pageNum: 1, // 默认每页显示1条数据
      pageSize: 10,
      loading: false,
      totalCount: 0,
      medicineSelection: []
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    // this.getRoutes()
    if (this.$store.state.user.roles === 'checker') {
      this.getPayment({
        adminId: this.$store.state.user.adminId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    } else {
      this.getPayment({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  },
  methods: {
    async getPayment(data) {
      const res = await getReturn(data)
      console.log(res)
      this.paymentList = res.data.list
      for (const i in this.paymentList) {
        this.paymentList[i].createTime = timestampToTime(this.paymentList[i].createTime)
        this.paymentList[i].type = typePrescriptionC(this.paymentList[i].type)
      }
      this.totalCount = res.data.total
    },
    async handleEdit(scope) {
      this.dialog = true
      // const res = await getReturnById({ id: scope.row.id })
      const res1 = await getMedicineReturnById({ returnId: scope.row.id, pageNum: 1, pageSize: 100 })
      this.payment = scope.row
      console.log(this.payment)
      console.log(res1.data.list)
      this.payment.prescriptionMedicineDTOList = res1.data.list
    },
    async handleEditT(scope) {
      this.dialogT = true
      const res = await getPaymentById({ id: scope.row.id })
      console.log(res)
      this.payment = res.data
    },
    handleSizeChange(page) {
      this.pageSize = page
      this.getPayment({
        adminId: this.$store.state.user.roles === 'checker' ? this.$store.state.user.adminId : '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.getPayment({
        adminId: this.$store.state.user.roles === 'checker' ? this.$store.state.user.adminId : '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleSelectionChange(val) { // 选择药品
      this.medicineSelection = val
    },
    async HandleReturnGoods() {
      for (const i in this.medicineSelection) {
        this.medicineSelection[i].medicineId = this.medicineSelection[i].medicinalId
      }
      const res = await returnGoods({ paymentId: this.payment.id, medicineInfoVOList: this.medicineSelection, remark: '' })
      console.log(res)
      this.$notify({
        title: '退款成功',
        dangerouslyUseHTMLString: true,
        message: `
            <div> ${res.data}</div>
          `,
        type: 'success'
      })
      this.dialogT = false
    }

  }
}
</script>

<style lang="scss">
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}

.payment-input .el-input__inner {
  cursor: pointer;
}
.select-payment-dialog {
  // width: 100%;
  height: 90vh;
  overflow: auto;
}
</style>
